<template>
    <div>
        <el-dialog
                width="400px"
                :visible.sync="deleteshow"
                :modal="false"
        >
            <p>确认删除博客吗？</p>
            <el-button style="width: 40%" @click="deleteblog" type="success" plain>确认</el-button>
            <el-button style="width:40%;float: right" @click="deleteshow=false" type="primary" plain>取消</el-button>
        </el-dialog>
        <el-row>
            <div v-for="item in blogs" :key="id" class="text item">
                <el-card class="box-card" style="margin-top: 10px">
                    <div slot="header" class="clearfix" @click="toBlogContext(item.blog_id)">
                        <span>{{item.blog_title}}</span>

                        <el-row>
                            {{item.blog_type}}
                        </el-row>
                    </div>
                    <el-row class="bottom">
                        <el-col :span="3">
                            <el-avatar :size="50" :src="circleUrl"></el-avatar>
                        </el-col>
                        <el-col :span="8" class="createtime">
                            创建时间:{{item.create_time}}
                        </el-col>
                        <el-col :span="3">
                            <el-badge :value="12" :max="99" class="item">
                                <el-button size="small">评论</el-button>
                            </el-badge>
                        </el-col>
                        <el-col :span="3">
                            <el-badge :value="3" :max="99" class="item">
                                <el-button size="small">点赞</el-button>
                            </el-badge>
                        </el-col>
                        <el-col :span="3">
                            <el-badge :class="item">
                                <el-button size="small" @click="toEdit(item.blog_id)">编辑</el-button>
                            </el-badge>
                        </el-col>
                        <el-col :span="3">
                            <el-badge :class="item">
                                <el-button size="small" @click="changedelete(item.blog_id)">删除</el-button>
                            </el-badge>
                        </el-col>

                    </el-row>

                </el-card>
            </div>
        </el-row>
        <el-row>
            <el-pagination
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>


    import POST from "../../api/POST";
    import Cookies from "js-cookie";

    export default {
        name: "self-bloglist",
        components: {},
        data() {
            return {
                id: '',
                deleteshow: false,
                blogs: [],
                deleteid: '',
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            }
        },
        methods: {
            deleteblog() {
                let data = {'blog_id': this.deleteid};
                POST.deleteBlog(data).then(res => {

                });
                this.deleteshow = false;
                this.$router.push({path: '/personal/home'});
            }, toEdit(blogId) {
                this.$router.push({path: '/blog/' + blogId + '/blogedit'});
            }, toBlogContext(blogId) {
                this.$router.push({path: '/blog/' + blogId + '/blogcontextpage'});
            }, changedelete(blogid) {
                this.deleteid = blogid
                this.deleteshow = true;
            }

        },
        mounted() {
            this.info = Cookies.get('info');
            this.info = JSON.parse(this.info);
            this.id = this.info.account;
            console.log(this.id);
            let data = {'account': this.id};
            POST.teacherblogShowList(data).then(res => {
                this.blogs = res.content
            });
        }
    }
</script>

<style scoped>

</style>
